<template>
  <div>
 <!-- 面包屑导航 -->
 <el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>权限管理</el-breadcrumb-item>
   <el-breadcrumb-item>角色列表</el-breadcrumb-item>
 </el-breadcrumb>
  <!-- 卡片区域 -->
 <el-card class="box-card">
    <!-- 添加角色按钮区 -->
 <el-row>
   <el-col><el-button type="primary" plain  @click="dialogVisible=true">添加角色</el-button></el-col>
 </el-row>
 <!-- 列表数据 -->    
<el-table :data="rolesList" border stripe>
    <!-- 展开列 -->
    <el-table-column type="expand">
        <template slot-scope="scope">
         <el-row v-for="(item1,i1) in scope.row.children" :key="item1.id" :class="['dbbottom',i1===0?'dbtop':'','vcenter']" >
            <!-- 一级权限列表 -->
            <el-col :span="5">
                <el-tag closable  @close="removeTag(scope.row,item1.id)">{{item1.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
            </el-col>
            <!-- 二、三级权限列表 -->
            <el-col :span="19">
                <!-- 通过for循环循环二级权限 -->
                <el-row v-for="(item2,i2) in item1.children" :key="item2.id" :class="[i2===0 ? '':'dbtop','vcenter']" >
                    <el-col :span="6">
                        <el-tag type="success" @close="removeTag(scope.row,item2.id)" closable>{{item2.authName}}</el-tag>
                        <i class="el-icon-caret-right"></i>
                    </el-col>
                    <el-col :span="18">
                        <!-- 通过for循环循环三级权限 -->
                         <el-tag closable type="warning" v-for="(item3,i3) in item2.children" :key="item3.id" :class="[i3===0 ? '':'dbtop']"
                         @close="removeTag(scope.row,item3.id)">{{item2.authName}}</el-tag>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        </template>   
    </el-table-column>
    <!-- label="#" 索引列 -->
    <el-table-column type="index" label="#"></el-table-column>
    <el-table-column prop="roleName" label="角色名称" ></el-table-column>
    <el-table-column prop="roleDesc" label="角色描述" ></el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEidt(scope.row.id)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" size="mini" icon="el-icon-delete"  @click="removeUserByid(scope.row.id)">删除</el-button>
            <!-- 角色分配 -->
            <el-button type="warning" size="mini" icon="el-icon-setting" @click="showRightDirlog(scope.row)" @close="setRightDialogVisibleClose">分配权限</el-button>
        </template>
    </el-table-column>
</el-table>
</el-card>
<!-- 分配权限的对话框~~~~~~~~~~~~~~~~~~~~~~~太想回家了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<el-dialog
  title="分配权限"
  :visible.sync="setRightDialogVisible"
  width="50%">
  <!-- 树形控件 -->
  <el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKey"></el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRightDialogVisible = false">取 消</el-button> 
    <el-button type="primary" @click="setRightDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
<!-- 修改编辑用户对话框 ------------->
 <el-dialog
  title="角色编辑"
  :visible.sync="eudtDialogVisible"
  width="50%">
  <!-- 内容部分 -->
    <el-form :model="eudtRuleForm" ref="eidtRuleFormRef" label-width="90px"  @close="restForm">
     <el-form-item label="角色名称:" >
     <el-input v-model="eudtRuleForm.roleName"></el-input>
     </el-form-item>
     <el-form-item label="角色描述:" prop="email">
     <el-input v-model="eudtRuleForm.roleDesc"></el-input>
     </el-form-item>
     </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="eudtDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editDialogInfor">确 定</el-button>
  </span>
</el-dialog>
<!-- 添加角色 -->
<!-- <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span>
这是一段文字
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog> -->
</div>
</template>

<script>
export default {
data(){
    return{
        // 获取列表数据
        rolesList:[],
        //弹框隐藏
        setRightDialogVisible:false,
        //所有权限的数据
        rightslist:[],
        //树形控件的属性绑定对象
        treeProps:{
            label:'authName',
            children:'children'
        },
        //默认选中数据id值的数组
        defKey:[],
        //控制编辑对话框的显示与隐藏
        eudtDialogVisible:false,
        //查询到的角色
        eudtRuleForm:{}
    }
},
 created(){
    //获取所有的权限
     this.getRolesList();
    },
 methods:{
    async getRolesList(){
       const {data:res} = await this.$http.get("roles");
       if(res.meta.status!==200){
           return this.$message.error("获取列表失败！")
       }
       //如果不等于200就获取失败，否则就把获取的数据赋值给定义的这个数组
        this.rolesList=res.data;
        // console.log(this.rolesList,"```````````````````````````````")
     },
    // 根据id删除对应权限标签
    async removeTag(role,rightId){
    //弹框提示用户是否要删除
        const confirmReslut= await  this.$confirm('此操作将永久删除该用户权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
        ).catch(err=>err)
        // 如果用户确认删除，则返回值为字符串为confirm
        // 如果用户取消了删除，则返回值为字符串为cancel
        if(confirmReslut!=="confirm"){
          return this.$message.info('已取消删除');
        }
         const {data:res} =await this.$http.delete(`roles/${role.id}/rights/${rightId}`);
         if(res.meta.status!==200){
            return this.$message.error("删除用户权限失败！")
       }
         this.$message.success("删除用户权限成功！")
        //  这里刷新不建议调接口，因为重新调接口，打开的列表会关闭
        //  this.getRolesList();
        // 所有我们只需要给他重新赋值(不太懂)
         role.children=res.data;
        },
        //权限按钮设置
       async showRightDirlog(role){
           //获取所有权限数据
         const {data:res} =await this.$http.get('rights/tree');
         if(res.meta.status!==200){
             return this.$message.error("!")
         }
            //把获取到的权限数据保存到data中
            this.rightslist =res.data;

            //递归获取三级节点的id
            this.getDefKey(role,
            this.defKey);
            //控制弹框显示
            this.setRightDialogVisible=true;
        },
        //通过递归的形式，获取角色下所有三级权限的id，并保存到defKey数组中
        getDefKey(node,arr){
            //如果当前node节点不包含children属性，则是三级节点
            if(!node.children){
                return arr.push(node.id);
            }
            // 递归
            node.children.forEach(item => 
            this.getDefKey(item,arr));
        },
        //监听分配权限对话框的关闭事件
        setRightDialogVisibleClose(){
            //每次关闭打开后，需吧数组清空
            this.defKey=[];
        },
        // 编辑修改表单接口
       async showEidt(id){
           
        const{data:res}=await this.$http.get("roles/"+id);
            if(res.meta.status!==200){
                 return this.$message.error("查询用户失败!")
           }
           console.log(this.eudtRuleForm)
           this.eudtRuleForm=res.data;
           console.log(this.eudtRuleForm)
           //让这个弹框显示
           this.eudtDialogVisible=true;
        },
         //编辑修改表单关闭的重置事件
        restForm(){
              this.$refs.eidtRuleFormRef.resetFields();
        },
          //修改用户消息并提交
       editDialogInfor(){
            this.$refs.eidtRuleFormRef.validate(async valid=>{
             if(!valid) return
             //发起修改用户信息的数据请求
             const {data:res}= await this.$http.put("roles/"+this.eudtRuleForm.roleId,{
               roleName:this.eudtRuleForm.roleName,
               roleDesc:this.eudtRuleForm.roleDesc, 
             })
            if(res.meta.status!==200){
              return this.$message.error("更新用户信息失败!")
             }
              //关闭对话框，
              this.eudtDialogVisible=false;
              // ，刷新列表
               this.getRolesList();
              // 显示提示消息
              this.$message.success("更新用户信息成功！")
         })
    },
      //删除用户的方法
   async removeUserByid(id){
     //删除用户的方法
     const confirmReslut= await  this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
        ).catch(err=>err)
        // 如果用户确认删除，则返回值为字符串为confirm
        // 如果用户取消了删除，则返回值为字符串为cancel
        if(confirmReslut!=="confirm"){
          return this.$message.info('已取消删除')
        }
       const {data:res} =await this.$http.delete("roles/"+id);
         if(res.meta.status!==200){
          return this.$message.error("删除用户失败！")
       }
         this.$message.success("删除用户成功！")
         this.getRolesList();
       },
        
        }
}
</script>

<style lang="less" scoped>
.el-tag{
    margin: 7px 7px 7px 15px;
}
.dbtop{
    border-top:1px solid #eee ;
}
.dbbottom{
    border-bottom:1px solid #eee ;
}
// 居中权限
.vcenter{
    display: flex;
   align-items: center;
}
</style>>

